<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="static/echarts5.4.0/echarts.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
			}

			.container {
				height: auto;
				width: 100%;
			}

			.container 2 {
				height: auto;
				width: 100%;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.info {
				z-index: 999 !important;
			}

			.grid-text {
				font-size: 30px;
				font-weight: 800;
			}

			.text-red,
			.line-red,
			.lines-red {
				color: #c11508;
			}

			.text-green,
			.line-green,
			.lines-green {
				color: #39b54a;
			}

			.grid-xt-color,
			.line-xt {
				color: #FF5959;
			}

			.grid-hx-color,
			.line-hx {
				color: #00C6B3;
			}

			.grid-mx-color,
			.line-mx {
				color: #FFB06F;
			}

			.grid-td-color,
			.line-td {
				color: #8E1EFF;
			}

			.grid-xy-color,
			.line-xy {
				color: #2E83F8;
			}

			.show-grid {
				padding: 20px;
				box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
			}

			.grid-demo {
				margin: 1rem;
				padding: 20px;
				line-height: 60px;
				text-align: center;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
			}

			.show-icon-img {
				width: 40px;
				height: 40px;
			}

			.grid-tag {
				font-size: 12px;
				vertical-align: middle;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0px 8px;
				height: 25px;
				font-family: Helvetica Neue, Helvetica, sans-serif;
				white-space: nowrap;
			}

			.grid-tag[class*="line-"]::after {
				content: " ";
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid currentColor;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: inherit;
				z-index: 1;
				pointer-events: none;
			}

			.layui-layer-btn0 {
				border-color: #063683 !important;
				background-color: #063683 !important;
				color: #fff;
			}
		</style>
		<script>
			layui.use(['dropdown', 'layer'], function() {
				var dropdown = layui.dropdown;
				var layer = layui.layer;
				dropdown.on('click(docDemoMenu1)', function(options) {
					var othis = $(this); //当前菜单列表的 DOM 对象
					console.log(options.url)

				});
				$("#switchs").click(function() {
					layer.confirm('您确定切换成社区管理？', {
						btn: ['确定', '取消'] //按钮
					}, function() {
						window.location = 'index.html'
					}, function() {

					});
				});
			});
			$(function() {

				$("#pnav").load("public_navigation.html");
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
				$('.userinfo').hover(function() {});
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var chartDom0 = document.getElementById('main0');
				var myChart0 = echarts.init(chartDom0);
				var chartDom2 = document.getElementById('main2');
				var myChart2 = echarts.init(chartDom2);
				var chartDom3 = document.getElementById('main3');
				var myChart3 = echarts.init(chartDom3);
				var chartDom4 = document.getElementById('main4');
				var myChart4 = echarts.init(chartDom4);
				var option;
				var option2;
				var option3;
				var option4;
				var rtHeartRate = 1;
				var rtBreath = 1;
				var mai = 1;
				var rrange = 1;


				function randomData0() {
					now = getNowDate();
					value = Math.random() * 21 - 10;
					return {
						name: now.toString() + "***********",
						value: [
							getNowDate(), localStorage.spo2
						]
					};
				}

				function randomData() {
					now = getNowDate();
					value = Math.random() * 21 - 10;
					return {
						name: now.toString() + "***********",
						value: [
							getNowDate(), localStorage.rtHeartRate
						]
					};
				}

				function randomData2() {
					now = getNowDate();
					value = Math.random() * 21 - 10;
					return {
						name: now.toString(),
						value: [
							getNowDate(), localStorage.rtBreath
						]
					};
				}

				function randomData3() {
					now = getNowDate();
					value = Math.random() * 21 - 10;
					return {
						name: now.toString(),
						value: [
							getNowDate(), localStorage.mai
						]
					};
				}

				function randomData4() {
					now = getNowDate();
					value = Math.random() * 21 - 10;
					return {
						name: now.toString(),
						value: [
							getNowDate(), localStorage.rrange
						]
					};
				}
				// 格式化日对象
				const getNowDate = () => {
					var date = new Date();
					var sign2 = ":";
					var year = date.getFullYear() // 年
					var month = date.getMonth() + 1; // 月
					var day = date.getDate(); // 日
					var hour = date.getHours(); // 时
					var minutes = date.getMinutes(); // 分
					var seconds = date.getSeconds() //秒
					var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
					var week = weekArr[date.getDay()];
					// 给一位数的数据前面加 “0”
					if (month >= 1 && month <= 9) {
						month = "0" + month;
					}
					if (day >= 0 && day <= 9) {
						day = "0" + day;
					}
					if (hour >= 0 && hour <= 9) {
						hour = "0" + hour;
					}
					if (minutes >= 0 && minutes <= 9) {
						minutes = "0" + minutes;
					}
					if (seconds >= 0 && seconds <= 9) {
						seconds = "0" + seconds;
					}
					return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
				}


				let data0 = [];
				let data = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				let now = new Date();
				// var a=now.getHours()+':'+now.getMinutes()+':'+ (now.getSeconds()+1);getSeconds();
				// console.log(a)
				let oneDay = 24 * 3600 * 1000;
				let value = Math.random() * 10;
				for (var i = 0; i < 60; i++) {
					data0.push(randomData0());
				}
				for (var i = 0; i < 60; i++) {
					data.push(randomData());
				}
				for (var i = 0; i < 60; i++) {
					data2.push(randomData2());
				}
				for (var i = 0; i < 60; i++) {
					data3.push(randomData3());
				}
				for (var i = 0; i < 60; i++) {
					data4.push(randomData4());
				}
				option0 = {
					color: ["#2E83F8"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data0
					}]
				};
				option = {
					color: ["#FF5959"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option2 = {
					color: ["#00C6B3"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data2
					}]
				};
				option3 = {
					color: ["#FFB06F"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data3
					}]
				};
				option4 = {
					color: ["#7b49e6"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data4
					}]
				};
				setInterval(function() {
					data0.shift();
					data0.push(randomData0());
					data.shift();
					data.push(randomData());
					data2.shift();
					data2.push(randomData2());
					data3.shift();
					data3.push(randomData3());
					data4.shift();
					data4.push(randomData4());
					myChart0.setOption({
						series: [{
							data: data0
						}]
					});
					myChart.setOption({
						series: [{
							data: data
						}]
					});
					myChart2.setOption({
						series: [{
							data: data2
						}]
					});
					myChart3.setOption({
						series: [{
							data: data3
						}]
					});
					myChart4.setOption({
						series: [{
							data: data4
						}]
					});
					option && myChart0.setOption(option0);
					option && myChart.setOption(option);
					option2 && myChart2.setOption(option2);
					option3 && myChart3.setOption(option3);
					option4 && myChart4.setOption(option4);
				}, 1000);
			})
		</script>
	</head>
	<body>
		<div id="app">
			<input type="hidden" value="" id="openeinfo" />
			<div style="margin-top: 70px;background-color: #e5e5e5;"></div>
			<div class="layui-panel" style="float: left; width: 10% !important;" id="pnav"></div>
			<div class="container" style="width: 90% !important; float: right;padding-left: 30px;">
				<div class="layui-fluid">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>个人监测</legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-sm3" style="padding: 20px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);background: #fff;">
							<div class="grid-demo grid-demo-bg1">
								<div class="layui-row">
									<div class="layui-col-md9" style="font-size: 18px;padding: 20px;">
										基本信息
									</div>
									<div class="layui-col-md3" style="font-size: 18px;padding: 20px;">
										<a class="layui-btn layui-btn-normal" href="user_info.html" style="float: left;height: 25px;line-height: 25px !important; background-color: #fff !important; color:#3d6eff;">编辑</a>
									</div>
								</div>
								<div class="layui-row" style="padding: 20px;">
									<div class="layui-col-md12">
										<img src="static/image/user.png" style="background-color: #eaeaea;border-radius: 58%; width: 110px;height: 110px;" />
									</div>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md9" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">用户名：</span><span style="font-size: 14px;">{{uInfoData.userName}}-{{uInfoData.phone}}</span>
								</div>
								<div class="layui-col-md3" style="font-size: 16px;padding: 20px;">
									<!-- 	<a class="layui-btn layui-btn-normal" href="#"
									style="float: left;height: 25px;line-height: 25px !important; background-color: #fff !important; color:#3d6eff;" id="switchs">切换</a> -->
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">性别：</span><span style="font-size: 14px;" v-if="uInfoData.sex==1">男</span><span style="font-size: 14px;" v-else>女</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">生日：</span><span style="font-size: 14px;">{{uInfoData.bringDate}}</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">身高：</span><span style="font-size: 14px;">{{uInfoData. hight}}CM</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">体重：</span><span style="font-size: 14px;">{{uInfoData.weight}}KG</span>
								</div>
							</div>
						</div>
						<div class="layui-col-sm8 " style="padding: 20px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);background: #fff;margin-left: 10px;">
							<div class="layui-row">
								<div class="layui-col-xs5" style="font-size: 18px;padding: 0px;line-height: 1.875rem; padding-top: 20px;">
									<span style="font-size: 22px;float: left;">监测 </span>
									<span class="layui-badge" style="background-color: #063683;float:left; height: 20px;line-height: 20px;font-size: 13px;">当前设备：<span id="dqsbh"></span></span>
									<a class="layui-btn layui-btn-normal" href="javascript:void(0);" style="float: left;height: 25px;line-height: 25px !important; background-color: #fff !important; color:#3d6eff;" @click="EdoThis">切换设备</a>
									<span class="layui-badge" style="background-color: #b5b5b5;float:right;" id="sbstate">离线</span>
									<span style="float: right;"><img src="static/image/dianchi_4.png" style="height: 18px;width: 45px;"> </span>
								</div>
								<div class="layui-col-xs7" style="font-size: 15px;padding: 20px;">
									<span><img src="static/image/wendu.png" style="width: 20px;height: 20px;" />温度:</span><span id="showwd">5</span>℃
									<span style="margin-left:20px"><img src="static/image/shidu.png" style="width: 20px;height: 20px;" />湿度:</span><span id="showsd">30</span>%
									<span style="margin-left:20px"><img src="static/image/qiya.png" style="width: 22px;height: 24px;" />气压:</span><span id="showqy">101.123</span>
									<span>kPa</span><span style="margin-left:20px"><img src="static/image/ryht.png" style="width: 22px;height: 24px; color: red;margin-right:  5px;" />有害气体:</span><span id="showyh">0.1</span><span>mg/立方米</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-sm12">
									<div class="container">
										<div class="layui-row">
											<div class="layui-col-md2 " style=" width: 20% !important; height: 189px;">
												<div class="layui-row grid-demo show-grid" style="height: 165px;">
													<div class="layui-col-md4">
														<img src="static/image/xy.png" class="show-icon-img" />
													</div>
													<div class="layui-col-md6 grid-xy-color">
														<span class="grid-text" id="showxy">0</span>
													</div>
													<div class="layui-col-md12">
														<div class="grid-tag line-green" id="xystate">正常</div>
													</div>
												</div>
											</div>
											<div class="layui-col-md2  " style=" width: 20% !important;height: 189px;">
												<div class="layui-row grid-demo show-grid" style="height: 165px;">
													<div class="layui-col-md4 ">
														<img src="static/image/xticon.png" class="show-icon-img" />
													</div>
													<div class="layui-col-md7 grid-xt-color">
														<span class="grid-text" id="showxt">0</span> <!-- / 每分钟 -->
													</div>
													<div class="layui-col-md12">
														<div class="grid-tag line-green" id="xtstate">正常</div>
													</div>
												</div>
											</div>
											<div class="layui-col-md2 " style=" width: 20% !important;height: 189px;">
												<div class="layui-row grid-demo show-grid" style="height: 165px;">
													<div class="layui-col-md4">
														<img src="static/image/hxicon.png" class="show-icon-img" />
													</div>
													<div class="layui-col-md7 grid-hx-color">
														<span class="grid-text" id="showhx">0</span><!-- / 每分钟 -->
													</div>
													<div class="layui-col-md12">
														<div class="grid-tag line-green" id="hxstate">正常</div>
													</div>
												</div>
											</div>
											<div class="layui-col-md2 " style=" width: 20% !important;height: 189px;">
												<div class="layui-row grid-demo show-grid" style="height: 165px;">
													<div class="layui-col-md4">
														<img src="static/image/mbicon.png" class="show-icon-img" />
													</div>
													<div class="layui-col-md7 grid-mx-color">
														<span class="grid-text " id="mxtext" style="font-size: 18px;">一息五至</span> <!-- / 每分钟 -->
													</div>
													<!-- 	<div class="layui-col-md6">
														<div class="grid-tag line-green"><span id="showmx">0</span>/分钟
														</div>
													</div> -->
													<div class="layui-col-md12">
														<div class="grid-tag line-green" id="mxstate">正常</div>
													</div>
												</div>
											</div>
											<div class="layui-col-md2 " style=" width: 20% !important;height: 189px;">
												<div class="layui-row grid-demo show-grid" style="height: 165px;">
													<div class="layui-col-md4">
														<img src="static/image/tdicon.png" class="show-icon-img" />
													</div>
													<div class="layui-col-md6 grid-td-color">
														<span class="grid-text" id="showtd">0</span> <!-- / CM -->
													</div>
													<div class="layui-col-md12">
														<div class="grid-tag line-green" id="tdstate">正常</div>
													</div>
												</div>
											</div>

										</div>
									</div>
									<div class="animation-grid">
										<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
											<legend>实时血氧 <span style="color: #63BA79; font-size: 14px;">(%/每秒钟)</span>
											</legend>
										</fieldset>
										<div class="layui-row">
											<div class="layui-col-md12">
												<div id="main0" style="width:100%;height:260px;"></div>
											</div>
										</div>
										<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
											<legend>实时心跳 <span style="color: #63BA79; font-size: 14px;">(次/每秒钟)</span>
											</legend>
										</fieldset>
										<div class="layui-row">
											<div class="layui-col-md12">
												<div id="main" style="width:100%;height:260px;"></div>
											</div>
										</div>
										<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
											<legend>实时呼吸 <span style="color: #63BA79; font-size: 14px;">(次/每秒钟)</span>
											</legend>
										</fieldset>
										<div class="layui-row">
											<div class="layui-col-md12">
												<div id="main2" style="width:100%;height:260px;"></div>
											</div>
										</div>
										<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
											<legend>实时脉象 <span style="color: #63BA79; font-size: 14px;">(次/每秒钟)</span>
											</legend>
										</fieldset>
										<div class="layui-row">
											<div class="layui-col-md12">
												<div id="main3" style="width:100%;height:260px;"></div>
											</div>
										</div>
										<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
											<legend>实时体动 <span style="color: #63BA79; font-size: 14px;">(次/每秒钟)</span>
											</legend>
										</fieldset>
										<div class="layui-row">
											<div class="layui-col-md12">
												<div id="main4" style="width:100%;height:260px;"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
					<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
						<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
						<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">{{uInfoData.userName}}</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">5</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="static/js/config.js"></script>
		<script type="text/javascript">
			var websocket = null;
			var datass = '';
			var rloginName = localStorage.loginName;
			//判断当前浏览器是否支持WebSocket
			if ('WebSocket' in window) {
				//连接WebSocket节点
				websocket = new WebSocket("ws://mqtt.hytechie.com:8085/websocket/" + rloginName);
			} else {
				alert('Not support websocket')
			}


			//连接发生错误的回调方法
			websocket.onerror = function() {
				console.log("websocket.error");
			};


			//连接成功建立的回调方法
			websocket.onopen = function(event) {
				console.log("websocket.open");
			}


			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				if (JSON.stringify(event.data) != "{}") {
					if (event.data != '连接成功') {
						setMessageInnerHTML(event.data);
					}
				}
			}


			//连接关闭的回调方法
			websocket.onclose = function() {
				console.log("websocket.close");
			}


			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				websocket.close();
			}

			//将消息显示在网页上
			function setMessageInnerHTML(innerHTML) {
				var data = jQuery.parseJSON(innerHTML);
				var equName = localStorage.equName;
				// console.log(data);
				if (data.onlineNum != 0 || data.onlineNum >= 1) {
					var Obj = data.accTopicObj;
					if (Obj != undefined || Obj != null) {
						// console.log(Obj.devSerial);
						if (Obj.devSerial == equName) {
							var spo2 = parseInt(Obj.spo2);
							var rtHeartRate = parseInt(Obj.rtHeartRate);
							var rtBreath = parseInt(Obj.rtBreath);
							var mai = rtHeartRate / rtBreath;
							var rrange = parseInt(Obj.rrange);
							var battery = parseInt(Obj.battery);
							localStorage["spo2"] = Obj.spo2;
							localStorage["rtHeartRate"] = Obj.rtHeartRate;
							localStorage["rtBreath"] = Obj.rtBreath;
							localStorage["mai"] = mai.toFixed(1);
							localStorage["rrange"] = Obj.rrange;
							if (data != '{}') {
								$('#sbstate').css('background-color', '#39b54a');
								$('#sbstate').html('正常');
							}
							if (spo2 >= 50 || spo2 <= 100) {
								$('#xystate').css('color', '#39b54a');
								$('#xystate').html('正常');
							} else {
								$('#xystate').css('color', '#ff0000');
								$('#xystate').html('异常');
							}
							if (rtHeartRate >= 50 || rtHeartRate <= 120) {
								$('#xtstate').css('color', '#39b54a');
								$('#xtstate').html('正常');
							} else {
								$('#xtstate').css('color', '#ff0000');
								$('#xtstate').html('异常');
							}
							if (rtBreath >= 10 || rtBreath <= 30 || rtBreath != 0) {
								$('#hxstate').css('color', '#39b54a');
								$('#hxstate').html('正常');
							} else {
								$('#hxstate').css('color', '#ff0000');
								$('#hxstate').html('异常');
							}
							if (mai > 2 && mai <= 3.4) {
								$('#mxtext').css('color', '#063683');
								// $('#mxtext').html('迟脉');
								$('#mxtext').html('一息三至');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('迟脉');
							} else if (mai >= 3.5 && mai < 4.5) {
								$('#mxtext').css('color', '##');
								// $('#mxtext').html('缓脉');
								$('#mxtext').html('一息四至');
								$('#mxstate').css('color', '#25a5f7');
								$('#mxstate').html('缓脉');
							} else if (mai >= 4.5 && mai <= 5.6) {
								$('#mxtext').css('color', '#39b54a');
								// $('#mxtext').html('常脉');
								$('#mxtext').html('一息五至');
								$('#mxstate').css('color', '#39b54a');
								$('#mxstate').html('常脉');
							} else if (mai >= 6.6 && mai <= 10) {
								// $('#mxtext').html('数脉');
								$('#mxtext').css('color', '#f37198');
								$('#mxtext').html('一息六至');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('数脉');
							} else if (mai != 0 && mai >= 7) {
								// $('#mxtext').html('疾脉');
								$('#mxtext').css('color', '#ff0000');
								$('#mxtext').html('一息七至');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('疾脉');
							} else {
								$('#mxtext').css('color', '#ff0000');
								$('#mxtext').html('脉象异常');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('异常');
							}
							if (!isFinite(mai)) {
								mai = 0;
							}
							if (rrange >= 30 || rrange <= 100) {
								$('#tdstate').css('color', '#39b54a');
								$('#tdstate').html('正常');
							} else {
								$('#tdstate').css('color', '#ff0000');
								$('#tdstate').html('异常');
							}
							$('#showwd').html(Obj.temp);
							$('#showsd').html(Obj.humidity);
							$('#showqy').html(Obj.pressure);
							$('#showyh').html(Obj.tvoc);
							$('#showxt').html(Obj.rtHeartRate);
							$('#showhx').html(Obj.rtBreath);
							$('#showmx').html(mai.toFixed(1));
							$('#showtd').html(Obj.rrange);
							$('#showxy').html(Obj.spo2);
						}
					} else {
						localStorage["spo2"] = 0;
						localStorage["rtHeartRate"] = 0;
						localStorage["rtBreath"] = 0;
						localStorage["mai"] = 0;
						localStorage["rrange"] = 0;
						$('#showxy').html(0);
						$('#showxt').html(0);
						$('#showxt').html(0);
						$('#showhx').html(0);
						$('#showmx').html(0.0);
						$('#showtd').html(0);
						console.log("没有可用数据");
					}
				} else {
					console.log("设备不存在");
					localStorage["rtHeartRate"] = 0;
					localStorage["rtBreath"] = 0;
					localStorage["mai"] = 0;
					localStorage["rrange"] = 0;
					$('#sbstate').css('background-color', '#B5B5B5');
					$('#sbstate').html('离线');
					$('#showxy').html(0);
					$('#showxt').html(0);
					$('#showhx').html(0);
					$('#showmx').html(0.0);
					$('#showtd').html(0);
				}
			}
			//关闭连接
			function closeWebSocket() {
				websocket.close();
			}


			//发送消息
			function send() {
				var message = document.getElementById('text').value;
				websocket.send(message);
			}
		</script>
		<script>
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {
					uInfoData: [],
					eInfoData: [],
				},
				ready: function() {
					// this.getdata();
				},
				created: function() {
					this.getdata();
					$('#xystate').css('color', '#ff0000');
					$('#xystate').html('异常');
					$('#xtstate').css('color', '#ff0000');
					$('#xtstate').html('异常');
					$('#hxstate').css('color', '#ff0000');
					$('#hxstate').html('异常');
					$('#mxtext').css('color', '#ff0000');
					$('#mxtext').html('脉象异常');
					$('#mxstate').css('color', '#ff0000');
					$('#mxstate').html('异常');
					$('#tdstate').css('color', '#ff0000');
					$('#tdstate').html('异常');
					var equName = localStorage.equName;
					$('#dqsbh').html(equName);
					localStorage["spo2"] = 0;
					localStorage["rtHeartRate"] = 0;
					localStorage["rtBreath"] = 0;
					localStorage["mai"] = 0;
					localStorage["rrange"] = 0;
				},
				methods: {
					getdata: function() {
						var rloginName = localStorage.loginName;
						console.log(rloginName)
						if (rloginName == '' || rloginName == 'null' || rloginName == undefined) {
							layer.msg('登录过期或者无权访问！', {
								time: 1000,
								end: function() {
									location.href = 'login.html'
								}
							})
						} else {
							axios({
									method: 'GET',
									url: url + "/user/userInfo/lquserOwnInfo?phoneNum=" + rloginName,
									data: {}
								})
								.then(function(response) {
									localStorage["userId"] = response.data.userId;
									vm.uInfoData.hights = response.data.hight;
									vm.uInfoData = response.data;
								})
						}
					},
					EdoThis: function() {
						var optionstr = '';
						var rloginName = localStorage.loginName;
						var equName = localStorage.openeinfo;
						$.ajax({
							url: url + "/user/equipment/infoList?userId=" + rloginName,
							dataType: 'json',
							type: 'get',
							async: false,
							success: function(res) {
								$.each(res, function(index, item) {
									if (item.equName != null || item.equName !=
										"" || item.equName != "null") {
										optionstr += ' <option value="' + item.equName + '">' +
											item.equName + '</option>'; // 下拉菜单里添加元素
									}
								});
								//重新渲染 固定写法
							}
						});
						var contents =
							'<select name="interest" lay-filter="aihao" id="openeinfo" onchange="showopeneinfo(this)"><option value="">请选择设备</option>' +
							optionstr + '</select>';
						layer.open({
							title: '请选择切换的设备',
							btn: ['切换', '取消'],
							content: contents,
							yes: function(index, layero) {
								var rloginName = localStorage.loginName;
								axios({
										method: 'GET',
										url: url + "/user/equipment/updateIsDefault?userId=" +
											rloginName + "&equName=" + equName + "&isDefault=1",
										data: {}
									})
									.then(function(response) {
										var data = response.data;
										var message = response.data.message;
										if (data.code == 0) {
											layer.msg(message, {
												time: 2000,
												end: function() {
													location.href = 'home.html'
												}
											})
										} else {
											layer.msg(message);
										}
									})
							},
							btn2: function(index, layero) {
								layer.close(index);
							},
							cancel: function(index, layero) {
								if (layer.confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
									layer.close(index);
								}
								return false;
							}
						});
					}
				}
			})

			function showopeneinfo(obj) {
				let val = obj.options[obj.selectedIndex].value;
				localStorage["openeinfo"] = val;
				localStorage["equName"] = val;
			}
		</script>
	</body>
</html>